
<div class=" fluent-autocomplete-multiselect" style="width: 100%;" b-hg72r5b4ox="">
  <fluent-text-field style="width: 100%; min-width: 100%;" id="xxx" value="" current-value="" appearance="outline" blazor:onchange="1" role="combobox" aria-expanded="true" aria-controls="myComponent-popup" aria-label="2-Vincent Baaij (2 of 3)" blazor:onclick="2" blazor:oninput="3" blazor:elementreference="">
    <fluent-horizontal-scroll id="xxx" style="width: 100%;" slot="start" b-hg72r5b4ox="">
      <fluent-flipper onclick="event.stopPropagation(); document.getElementById('myComponent-scroll').scrollToPrevious();" slot="previous-flipper" aria-hidden="false" aria-label="Previous" title="Previous" role="button" tabindex="0" class="previous fluent-autocomplete-previous" direction="previous" b-hg72r5b4ox=""></fluent-flipper>
      <fluent-flipper onclick="event.stopPropagation(); document.getElementById('myComponent-scroll').scrollToNext();" slot="next-flipper" aria-hidden="false" aria-label="Next" title="Next" role="button" tabindex="0" class="next fluent-autocomplete-next" direction="next" b-hg72r5b4ox=""></fluent-flipper>
      <fluent-badge id="xxx" appearance="neutral" blazor:onclick="4" aria-label="1-Denis Voituron" blazor:elementreference="">
        <span style="width: 100%; display: flex; align-items: center; justify-content: center; white-space: nowrap;">1-Denis Voituron<svg style="width: 12px; fill: var(--accent-fill-rest); cursor: pointer; margin: 2px 0px 0px 2px;" focusable="true" tabindex="0" role="button" viewBox="0 0 24 24" blazor:onkeydown="9" blazor:onclick="10">
            <title>Remove 1-Denis Voituron</title>
            <path d="m4.4 4.55.07-.08a.75.75 0 0 1 .98-.07l.08.07L12 10.94l6.47-6.47a.75.75 0 1 1 1.06 1.06L13.06 12l6.47 6.47c.27.27.3.68.07.98l-.07.08a.75.75 0 0 1-.98.07l-.08-.07L12 13.06l-6.47 6.47a.75.75 0 0 1-1.06-1.06L10.94 12 4.47 5.53a.75.75 0 0 1-.07-.98l.07-.08-.07.08Z"></path>
          </svg>
        </span>
      </fluent-badge>
      <fluent-badge id="xxx" appearance="neutral" blazor:onclick="5" aria-label="2-Vincent Baaij" blazor:elementreference="">
        <span style="width: 100%; display: flex; align-items: center; justify-content: center; white-space: nowrap;">2-Vincent Baaij<svg style="width: 12px; fill: var(--accent-fill-rest); cursor: pointer; margin: 2px 0px 0px 2px;" focusable="true" tabindex="0" role="button" viewBox="0 0 24 24" blazor:onkeydown="11" blazor:onclick="12">
            <title>Remove 2-Vincent Baaij</title>
            <path d="m4.4 4.55.07-.08a.75.75 0 0 1 .98-.07l.08.07L12 10.94l6.47-6.47a.75.75 0 1 1 1.06 1.06L13.06 12l6.47 6.47c.27.27.3.68.07.98l-.07.08a.75.75 0 0 1-.98.07l-.08-.07L12 13.06l-6.47 6.47a.75.75 0 0 1-1.06-1.06L10.94 12 4.47 5.53a.75.75 0 0 1-.07-.98l.07-.08-.07.08Z"></path>
          </svg>
        </span>
      </fluent-badge>
    </fluent-horizontal-scroll>
    <svg slot="end" style="width: 12px; fill: var(--accent-fill-rest); cursor: pointer;" focusable="true" tabindex="0" role="button" viewBox="0 0 16 16" blazor:onkeydown="6" blazor:onclick="7" blazor:onfocus="8">
      <title>Clear</title>
      <path d="m2.59 2.72.06-.07a.5.5 0 0 1 .63-.06l.07.06L8 7.29l4.65-4.64a.5.5 0 0 1 .7.7L8.71 8l4.64 4.65c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L8 8.71l-4.65 4.64a.5.5 0 0 1-.7-.7L7.29 8 2.65 3.35a.5.5 0 0 1-.06-.63l.06-.07-.06.07Z"></path>
    </svg>
  </fluent-text-field>
  <div class="fluent-overlay" style="cursor: auto; position: fixed; display: flex; align-items: center; justify-content: center; z-index: 9900;" blazor:onclick="13" blazor:oncontextmenu="14" blazor:oncontextmenu:preventdefault="" b-xkrr7evqik="">
    <div b-xkrr7evqik=""></div>
  </div>
  <fluent-anchored-region anchor="xxx" horizontal-positioning-mode="dynamic" horizontal-default-position="right" horizontal-inset="" horizontal-threshold="0" horizontal-scaling="content" vertical-positioning-mode="dynamic" vertical-default-position="unset" vertical-threshold="0" vertical-scaling="content" auto-update-mode="auto" style="z-index: 9999;" b-2ov9fhztky="" blazor:elementreference="">
    <div style="z-index: 9999; background-color: var(--neutral-layer-floating); box-shadow: var(--elevation-shadow-flyout); margin-top: 10px; border-radius: calc(var(--control-corner-radius) * 2px); background-color: var(--neutral-layer-floating);" b-2ov9fhztky="">
      <div id="xxx" role="listbox" style="width: 100%;" tabindex="0" b-hg72r5b4ox="">
        <fluent-option id="xxx" value="1-Denis Voituron" selected="" blazor:onclick="15" aria-selected="true" blazor:elementreference="">1-Denis Voituron</fluent-option>
        <fluent-option id="xxx" value="2-Vincent Baaij" selected="" blazor:onclick="16" aria-selected="true" selectable="" blazor:elementreference="">2-Vincent Baaij</fluent-option>
        <fluent-option id="xxx" value="3-Bill Gates" blazor:onclick="17" aria-selected="false" blazor:elementreference="">3-Bill Gates</fluent-option>
      </div>
    </div>
  </fluent-anchored-region>
</div>